<!--  -->
<template>
    <div class="home">
        <zhihuHeader :day="day" :month="month" />
        <zhihu-banner :bannerData="bannerData" />
        <zhihu-newsItem :news="newsData" @change="formSon"/>
    </div>
</template>

<script lang="ts">
import zhihuHeader from "../components/Header.vue";
import zhihuBanner from "/@/components/Banner.vue";
import zhihuNewsItem from '../components/NewsItem.vue'
import { reactive, toRefs, computed, onBeforeMount, watch,provide } from "vue";
import { getBannerList,getNewsList } from "../api/index";
import utils from "../utils";

export default {
    components: {
        zhihuHeader,
        zhihuBanner,
        zhihuNewsItem
    },

    setup() {
        const state = reactive({
            date: new Date(),
            bannerData: [],
            newsData:[]
        });

        let day = computed(() => utils.formatTime(state.date)[2]);
        let month = computed(() => utils.formatTime(state.date)[1]);

        const getBannerData = async () => {
            const res = await getBannerList();
            state.bannerData = res.data.data;
            console.log(state.bannerData);
        };

        const getNewsData = async () => {
            const res = await getNewsList();
            state.newsData = res.data.data;
        };

        provide("message", "我是父组件向子组件传递的值");

        function formSon(params) {
            console.log(params)
        }

        onBeforeMount(() => {
            getBannerData();
            getNewsData();
        });

        return {
            ...toRefs(state),
            day,
            month,
            formSon
        };
    },
};
</script>


<style lang='scss' scoped>
.home {
    widows: 100%;
    height: 100%;
}
</style>